
<title>树形组件</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>树形组件</cite></a>
    </div>
</div>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">当前连接列表</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button type="button" class="layui-btn layui-btn-sm" lay-demo="refresh">刷新</button>
                        <button type="button" class="layui-btn layui-btn-sm" lay-demo="link">添加新连接</button>
                    </div>
                    <div id="test-tree-linkList"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header">库信息</div>
                <div class="layui-card-body">
                    <table id="LAY-db-depot-list" lay-filter="LAY-db-depot-list"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加库</button>
    </div>
</script>

<script type="text/html" id="LAY-db-depot-list-operation">
        <input type="checkbox" name="dsName" value="{{d.dsName}}" title="选择" lay-filter="lockDemo" {{
               d.dsName === layui.sessionData(layui.setter.tableName).headNavigation ? 'checked' : ''
        }}>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<script>
    layui.use(['admin', 'tree', 'util','table','setter','form','view'], function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util
            ,admin = layui.admin
            ,table = layui.table
            ,setter = layui.setter
            ,form = layui.form
            ,view = layui.view

        var dsName = '';
        var groupName = '';

        //按钮事件
        util.event('lay-demo', {
            refresh: function(othis){
                refreshTree()
            },
            link: function(othis){
                location.hash = '/dbLink/dblinkList';
            }
        });
        // 进入页面的时候自动获取树列表
        refreshTree();
        // 刷新树
        function refreshTree() {
            admin.req({
                type: 'get',
                url: 'sys/treeData',
                traditional: true,
                success: function (data) {
                    tree.render({
                        elem: '#test-tree-linkList'
                        , data: data.data
                        , showCheckbox: false // 复选框
                        ,onlyIconControl:true // 只能通过左侧展开
                        //, edit: ['add', 'update', 'del'] //操作节点的图标
                        ,click: function(obj){
                            dsName = obj.data.dsName;
                            groupName = obj.data.groupName;
                         //  console.log(dsName); //得到当前点击的节点数据
                           //console.log(obj.data); //得到当前点击的节点数据
                         //   console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                         //  console.log(obj.elem); //得到当前节点元素
                         //  console.log("******"); //当前节点下是否有子节点
                         //  console.log(obj.data.children.length); //当前节点下是否有子节点
                         //  console.log(obj.data.children!=null); //当前节点下是否有子节点
                         //  console.log(obj.data.children==null); //当前节点下是否有子节点
                            if (obj.data.children.length===0){
                                refreshList([obj.data.baseNew])
                            }else {
                                refreshList(obj.data.baseNews)
                            }
                        }
                    });
                }
            })
        };

        function refreshList(data) {
            table.render({
                elem: '#LAY-db-depot-list'
                ,id: 'LAY-db-depot-list'
                ,data: data
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,cols: [[
                    {width : '10%',field: 'name', title: '库名称',fixed:'left'}
                    ,{width : '10%',field: 'days', title: '文件时间跨度(天)'}
                    ,{width : '10%',field: 'keep1_keep2_keep_D', title: '数据保留(天)'}
                    ,{width : '10%',field: 'createdTime', title: '创建时间'}
                    ,{width : '10%',field: 'replica', title: '副本个数'}
                    ,{width : '10%',field: 'cache_MB', title: '内存块的大小'}
                    ,{width : '10%',field: 'blocks', title: 'VNODE内存(块)'}
                    ,{width : '10%',field: 'minrows', title: '块最小条数'}
                    ,{width : '10%',field: 'maxrows', title: '块最大条数'}
                    ,{width : '10%',field: 'wallevel', title: 'WAL级别'}
                    ,{width : '10%',field: 'fsync', title: 'fsync周期'}
                    ,{width : '10%',field: 'comp', title: '压缩标志位'}
                    ,{width : '10%',field: 'cachelast', title: '高速缓存'}
                    ,{width : '10%',field: 'precision', title: '时间戳精度'}
                    ,{width : '10%',field: 'status', title: '状态'}
                    ,{width : '10%',field: 'ntables', title: 'ntables'}
                    ,{width : '10%',field: 'vgroups', title: 'vgroups'}
                    ,{width : '10%',field: 'quorum', title: 'quorum'}
                    ,{width : '10%',field: 'update', title: 'update'}
                    ,{width : '20%',title: '操作',   align:'center', fixed: 'right', toolbar: '#LAY-db-depot-list-operation'}
                ]]
                // ,height: 'full-320'
                ,text: '对不起，加载出现异常！'
            });
        }

        //头工具栏事件
        table.on('toolbar(LAY-db-depot-list)', function(obj){
            //console.log(obj)
            switch(obj.event){
                case 'add':
                    layer.confirm('提示!!\r\n 添加库功能bug以修改,后续表操作管理如失败,可能是bug修改失效,请断开连接后重试!!', {
                        btn: ['以了解!'] //可以无限个按钮
                        ,btn1: function(index, layero){
                            admin.popup({
                                title: '添加库'
                                ,area: ['500px', '1000px']
                                ,id: 'LAY-popup-depot-add'
                                ,success: function(layero, index){
                                    view(this.id).render('dbdepot/dbdepotform').done(function(){
                                        form.render(null, 'layuiadmin-form-dbdepot');
                                        //监听提交
                                        form.on('submit(LAY-dbdepot-front-submit)', function(data){
                                            var field = data.field; //获取提交的字段
                                            //  console.log(field);
                                            // 提交 Ajax 成功后，关闭当前弹层并重载表格
                                            // $.ajax({});
                                            admin.req({
                                                type: 'POST',
                                                url: 'depot/'+groupName,
                                                headers: { dsName: dsName},
                                                data: field,
                                                success: function (data) {
                                                    layer.msg(data.msg);
                                                    refreshTree();
                                                }
                                            });
                                            layer.close(index); //执行关闭
                                        });
                                    });
                                }
                            });
                        }
                    });
                    break;
            };
        });
//监听锁定操作
        form.on('checkbox(lockDemo)', function(obj){
            var checkboxThis = this
            if(obj.elem.checked){
            // 写入缓存
            layui.sessionData(setter.tableName, {
                key: "headNavigation"
                ,value:checkboxThis.value
            });
            }else {
                //清理缓存
                admin.removeHeadNavigation();
            }
            // 刷新表格
            table.reload('LAY-db-depot-list')
            //table.render({elem: '#LAY-db-depot-list'})
            // 刷新头部导航
            admin.renderHead();
        });

        //监听工具条
        table.on('tool(LAY-db-depot-list)', function(obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    admin.req({
                        type: 'delete',
                        url: 'depot',
                        traditional: true,
                        headers: { dsName: data.dsName},
                        data: {"name": data.name,"dbName": data.dsName},
                        success: function (data) {
                            layer.msg(data.msg);
                            obj.del();
                            layer.close(index);
                            table.reload('LAY-db-depot-list');//重载表格
                        }
                    })

                });

            } else if(obj.event === 'edit'){
                console.log(data);
                admin.popup({
                    type:0
                    ,title: '警告!! '
                    ,content: '开发者比较懒 ,不建议在页面上更改库设置,请在黑框框操作!!'
                });
                // admin.popup({
                //     title: '编辑用户'
                //     ,area: ['500px','1000px']
                //     ,id: 'LAY-popup-dbdepot-add'
                //     ,success: function(layero, index){
                //         view(this.id).render('dbdepot/dbdepotform', data).done(function(){
                //             form.render(null, 'layuiadmin-form-dbdepot');
                //             //监听提交
                //             form.on('submit(LAY-dblink-front-submit)', function(data){
                //                 var field = data.field; //获取提交的字段
                //                 console.log("* 提交数据");
                //                 console.log(field);
                //                 //提交 Ajax 成功后，关闭当前弹层并重载表格
                //                 //$.ajax({});
                //                 // admin.req({
                //                 //     type: 'POST',
                //                 //     url: 'dataSource',
                //                 //     data: field,
                //                 //     success: function (data) {
                //                 //         layer.msg(data.msg);
                //                 //         layui.table.reload('LAY-db-link'); //重载表格
                //                 //     }
                //                 // });
                //                 layer.close(index); //执行关闭
                //             });
                //         });
                //     }
                // });
            }
        });
    });
</script>